<template>
  <div class="container">
      <div class="atcImg">
         <img :src="wenda.thumb" alt="" mode="aspectFill" class="thumimg "/>
         <div class="report">
              <report :info="wenda" type="2" model="1"></report>
          </div>
      </div>
      <div class="answer">
         <div class="weui-cell__hd">
            <div class="thumb">
               <div class="avatarK">
                  <avatar  :avatar="wenda.user.avatar" 
                           :Level="wenda.user.partner_level" 
                           :userId="wenda.user.id" 
                           :isAuth="wenda.user.is_auth" 
                           :isPartner="wenda.user.is_partner"></avatar>
               </div>
               
            </div>
         </div>
         <div class="weui-cell__bd">
            <div class="nickname">{{wenda.user.nickname}}</div>
         </div>
         <div class="weui-cell__ft">
             <Follow :info="wenda" :userId="wenda.user.id" ></Follow>
         </div>
      </div>
      <div class="comment">
         <span>Q：</span>{{wenda.questions}}
      </div>
      <div class="imgs">
            <img :src="item" alt="" v-for="item in wenda.images" :key="item">
      </div>
      <div class="weui-cell yujiang">
          <div class="weui-cell__bd">
              <voice v-if="wenda.audio" 
              :audio="wenda.audio" 
              :id="wenda.id" 
              @playLy="audioPLay" 
              @pauseLy="audiopause"
              :playIndex="playIndex" 
              :status="wenda.isplay" 
              :info="wenda"/>
          </div>
          <div class="weui-cell__ft">
             <div class="jiang">悬赏金额 <span>{{wenda.reword}}</span></div>
          </div>
      </div>  

      <div class="commentTitle">回答区 <img src="/static/images/jtDown.png" alt="" class="jtDowwn"></div>
      <ul v-if="list.length>0">
         <li class="answerList" v-for="(item,idx) in list" :key="idx">
            <div class="originator weui-cell" >
               <div class="weui-cell__hd">
                   <avatar :avatar="item.user.avatar" 
                           :Level="item.user.partner_level" 
                           :userId="item.user.id" 
                           :isAuth="item.user.is_auth" 
                           :isPartner="item.user.is_partner"></avatar>
               </div>
               <div class="weui-cell__bd">
                  <div class="nickname">{{item.user.nickname}}</div>
                  <div class="time">{{item.created_at}}<span v-if="item.is_best==1" >| <img src="/static/images/img_best_answer@2x.png" alt="" class="bestAnswer" ></span></div>
               </div>
               <div class="weui-cell__hd">
                   <Follow :info="item" :userId="item.user.id" ></Follow>
               </div>
               <div class="weui-cell__ft">
                   <report :info="wenda" type="1" model="2"></report>
               </div>
            </div>
            <div class="answerCon">
                {{item.content}}
            </div>
            <div class="imgs" v-if="item.images">
                <img :src="itemImg" alt="" v-for="(itemImg,index) in item.images" :key="index"/>
            </div>
            <div class="weui-cell">
               <voice v-if="item.audio" 
               :audio="item.audio" 
               :id="item.id" 
               @playLy="audioPLay" 
               @pauseLy="audiopause"
               :playIndex="playIndex" 
               :status="item.isplay" 
               :info="item"/></div>
            
            <div class="weui-cell yujiang ">
                 <div class="weui-cell__bd"><div class="jiang" v-if="item.is_best==1">悬赏金额 <span>{{wenda.reword}}</span></div></div>
                 <div class="weui-cell__bd">
                     <div class="operate">
                        <operate :info="item" iszanCon="true" isques="true"></operate>
                     </div>
                 </div>
            </div>
            <!-- <div class="zanMember">
               <img src="/static/images/message_01.png" alt=""> 大白牙、小白牙<span>等100人</span>
            </div> -->
            <ul class="reply" v-if="item.sub.length>0">
                <li v-for="(subItem,index) in item.sub" :key="index"><span>{{subItem.user.nickname}}:</span>{{subItem.content}}</li>
            </ul>
         </li>
      </ul>
      <div v-else>
          <img :src="img+'/que/no_conten@2x.png'" class="ques"/>
      </div>
      <div class="kong"></div>
      <div class="footer">
         <button type="" open-type="getUserInfo" @getuserinfo="bindGetUserInfo">
            我也要答题
         </button>
      </div>
  </div>
</template>

<script>
import evaluate from "@/components/evaluate";
import classTit from "@/components/classTit";
import report from "@/components/report";
import Follow from "@/components/follow"
import operate from "@/components/operate"
import avatar from "@/components/avatar"
import voice from "@/components/voice"
import {anslist} from "@/api/question";
import {show} from "@/api/index";
import {showComment} from "@/api/operate.js"
import {zanComment} from "@/api/operate.js"
import { xdLogin } from "@/utils/login"
export default {
  components: {
    evaluate,
    classTit,
    report,
    Follow,
    operate,
    avatar,
    voice
   },
   data(){
       return{
          wenda:"",
          list:[],
          load:false,
          keType:"",
          uid:0,
          img: this.$URL.imgurl,
          playIndex:null,
          page:1,
          userid:0,
          quesId:"",
          innerAudioContext:""
       }
   },
  methods: {
    toInfo(e) {
      let url = e.currentTarget.dataset.url;
      mpvue.navigateTo({ url });
    },
    toAsk(){
       let wenda=JSON.stringify(this.wenda)
       let url="/pages/writeAnswer/main?id="+this.quesId+"&wenda="+wenda;
       mpvue.navigateTo({ url });
    },
    follow(item){
       let guan=item.guan;
       item.guan=!guan;
    },
    getComment(){
       let data={};
       data.type=this.keType;
       data.id=this.quesId
       data.user_id=this.userId;
         
      showComment(data).then(res=>{
        console.log(res)
        if(res.code==200){
          this.queS=false
          let last_page=res.data.total_page;
          let array=[]
         res.data.data.map((item,index)=>{
               array.push(
                  Object.assign({},item,{isplay:false})
               )
            }); 
          this.list=this.list.concat(array);
          console.log(this.list)
          if (last_page > this.page){
              this.load=true
          }else{
              this.load=false
          }
        }else{
           this.list=[]
           this.queS=true
        }
          
      },err=>{
          this.queS=true
      }).catch(err=>{
          this.queS=true
      })
    },
    bindGetUserInfo(e){
        wx.getStorage({
            key: 'token',
            success: (result) => {
               this.toAsk()
            },
            fail: () => {
               xdLogin(e).then((res)=>{
                  
               })
            },
            complete: () => {}
      });
    },
    audioPLay(data){
      let id=data.id
      let ypp=data.audio
      if (!this.playIndex) {
         this.playIndex=id;  
             this.innerAudioContext = wx.createInnerAudioContext()
             this.innerAudioContext.src = ypp;
             this.innerAudioContext.play()
             this.innerAudioContext.onPlay(() => {
               console.log('开始播放')
             })
         
      } else { 
         console.log(this.innerAudioContext)
            this.innerAudioContext.stop()
            this.innerAudioContext = wx.createInnerAudioContext()
             this.innerAudioContext.src = ypp
             this.innerAudioContext.play()
             this.innerAudioContext.onPlay(() => {
               console.log('开始播放')
             })
            
         }
      },
      audiopause(data){
         console.log(data)
         let id=data.id
         let ypp=data.audio
         this.innerAudioContext.stop()
      }
  },
  created() {
  },
   onReachBottom(){
      if(this.load){
         this.page++;
         this.getComment()
      }
   },
  onLoad(options){
     Object.assign(this.$data, this.$options.data())
     let data={}
     this.quesId=options.id;
     this.keType=options.keType;
     wx.getStorageSync("user_info").id?this.userId=wx.getStorageSync("user_info").id:'';
     data.id=this.quesId;
     data.type=this.keType;
     data.uid=this.userId;
     show(data).then(res=>{
        if(res.code==200){
           let info=res.data;
           info.isplay=false
           this.wenda=info
           
        }
        
     })
  },
  onUnload(){
      this.innerAudioContext.stop()
   },
  onShow(){
     this.getComment()
  }
};
</script>
<style>

.ques{
   width:209px;
   height:162px;
   display:block;
   margin:50px auto;
}
.classify .nav .nav-item {
  width: 25%;
}
.answerList .follow{
   margin-right:10px;
}

</style>
<style lang="scss">

.atcImg {
  width: 375px;
  height: 225px;
  position: relative;
  .thumimg {
    width: 375px;
    height: 225px;
    display: block;
  }
  .report {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 25px;
    height: 15px;
  }
}
.yujiang{
   .jiang{
      padding: 0 10px;
      height:25px;
      background:rgba(255,255,255,1);
      box-shadow:0px 2px 3px 0px rgba(0, 0, 0, 0.2);
      border-radius:13px;
      line-height: 25px;
      font-size:11px;
      font-weight:500;
      color:rgba(26,132,251,1);
      display: inline-block;
      span{
         font-size:15px;
         font-weight:bold;
      }
   }
}
.answer {
  padding: 6px 15px;
  display: flex;
  position: relative;
  .avatarK {
    width: 60px;
    height: 60px;
    background: rgba(0, 0, 0, 1);
    border: 1px solid rgba(26, 132, 251, 1);
    border-radius: 50%;
    margin-top: -35px;
    margin-right: 10px;
    .Avatar{
       width: 60px;
       height: 60px;
       .avatar{
          width: 60px;
          height: 60px;
       }
    }

  }
  .nickname {
    font-size: 14px;
    font-weight: bold;
    color: rgba(26, 132, 251, 1);
  }
}
.comment {
  padding: 8px 15px;
  font-size: 14px;
  color: #333;
  line-height: 21px;
  span {
    color: rgba(233, 181, 94, 1);
    font-weight: bold;
  }
}
.imgs{
   padding-left:15px;
   img{
      width:110px;
      height:110px;
      margin-right: 8px;
   }
}
.commentTitle {
  padding: 10px 0;
  font-size: 14px;
  text-align: center;
  font-weight: 500;
  color: rgba(153, 153, 153, 1);
  line-height: 18px;
  position: relative;
  width: 375px;
  .jtDowwn{
      width: 20px;
      height: 20px;
      vertical-align:middle;
    }
  &::after {
    position: absolute;
    content: "";
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 150px;
    height: 1px;
    background: rgba(221, 221, 221, 1);
  }
  &::before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 150px;
    height: 1px;
    background: rgba(221, 221, 221, 1);
  }
}
.answerList {
   border-bottom: 5px solid #F4F5F5;
  .follow {
    margin-right: 10px;
  }
  .originator {
    .time {
      font-size: 11px;
      color: #666;
    }
  }
  .bestAnswer {
    width: 62px;
    height: 15px;
    vertical-align: middle;
  }
  .answerCon{
      padding: 10px 15px;
      font-size:14px;
      font-weight:500;
      color:rgba(51,51,51,1);
      line-height:21px;
  }
  .zanMember{
      padding: 10px 15px 10px 15px;
      font-size:12px;
      font-weight:500;
      color:rgba(51,51,51,1);
      line-height:18px;
      position: relative;
     img{
         width:17px;
         height:14px;
         margin-right: 7px;
         vertical-align: middle;
     }
     span{
         color: #1A84FB;
     }
     &::before{
        content: "";
        top: 0;
        left: 15px;
        right: 15px;
        position: absolute;
        border-top: 1px solid #ddd;
     }
  }
  .reply{
     padding: 10px 15px;
     padding-top: 0;
     li{
         padding-top: 10px;
         font-size:12px;
         font-weight:500;
         color:rgba(51,51,51,1);
         line-height:18px;
         span{
            color: #1A84FB;
            font-size: 14px;
         }
     }
  }
}



.operate{
   font-size:12px;
   font-weight:500;
   color:rgba(102,102,102,1);
   line-height:18px;
   .icon{
      width:17px;
      height:14px;
      margin-right: 7px;
      margin-left: 7px;
      vertical-align: middle;
   }
}
.kong{
   height: 49px;
}
.footer{
   width:375px;
   height:49px;
   background:rgba(26,132,251,1);
   position: fixed;
   text-align: center;
   line-height: 49px;
   font-size:15px;
   font-weight:bold;
   color:rgba(255,255,255,1);
   left: 0;
   bottom: 0;
   button{
      width:375px;
      height:49px;
      background:rgba(26,132,251,1);
      position: fixed;
      text-align: center;
      line-height: 49px;
      font-size:15px;
      font-weight:bold;
      color:#fff;
      padding:0;
      width:375px;
      height:49px;
      margin:0;
   }
}
</style>
